<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css 浮动布局</title>
		<style>
			.clearfix:after {
				content: '';
				clear: both;
				display: table;
			}
			
			.clearfix {
				*zoom: 1;
				/*兼容ie低版本*/
			}
		</style>
	</head>

	<body>
		<div class="clearfix" style="text-align: center;">
			<div style="float: left;background: gold;width: 300px;">
				左侧内容
			</div>
			<div style="float: right;background: goldenrod;">
				右侧内容
			</div>
			<div>
				<div style="float: left;">这是内部的左侧</div>
				<div style="margin-left: 100px;">这是内部的右侧</div>
			</div>
		</div>
	</body>

</html>